<template>
  <div class="page-container page-container-detail-page">
    <!--面包屑导航-->
    <div class="breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>营销中心</el-breadcrumb-item>
        <el-breadcrumb-item>通用促销</el-breadcrumb-item>
        <el-breadcrumb-item>满量促销详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="page-container-detail">
      <p class="pageName">满量促销详情</p>
      <div class="toolbar flex">
        <div class="toolbar-model">
          <span class="color999 font18">活动名称：</span>
          <span class="color333 font18">{{data.promName}}</span>
        </div>
        <div class="toolbar-model">
          <span class="color999 font18">活动ID：</span>
          <span class="color333 font18">{{data.promotionId}}</span>
        </div>
        <div class="toolbar-model">
          <!--  1 待提交  2 待审核  3未开始 4 审核不通过  5 进行中  6 已过期  7 已关闭', -->
          <span class="color999 font18">当前状态：</span>
          <span class="color333 font18" v-if="data.status == 9">活动草稿</span>
          <span class="color333 font18" v-else-if="statusFormat(data) == 11">待提交</span>
          <span class="color333 font18" v-else-if="statusFormat(data) == 12">待审核</span>
          <span class="color333 font18" v-else-if="statusFormat(data) == 13">未开始</span>
          <span class="color333 font18" v-else-if="statusFormat(data) == 14">审核未通过</span>
          <span class="color333 font18" v-else-if="statusFormat(data) == 15">进行中</span>
          <span class="color333 font18" v-else-if="statusFormat(data) == 16">已过期</span>
          <span class="color333 font18" v-else-if="statusFormat(data) == 17">已结束</span>
          <span class="color333 font18" v-else-if="data.status == 7">已关闭</span>
        </div>
      </div>
      <div class="search-button">
        <kt-button
          type="primary"
          :size="size"
          @click="submitReviewShow"
          v-if="statusFormat(data) == 11 || statusFormat(data) == 14"
          v-show="data.editFlag"
          perms="market:fullnum:submit"
          label="提交审核"
        ></kt-button>
        <kt-button
          type="primary"
          :size="size"
          @click="reviewShow"
          v-if="statusFormat(data) == 12"
          v-show="data.editFlag"
          label="审核"
          perms="market:fullnum:verify"
        ></kt-button>
        <kt-button
          type="primary"
          :size="size"
          @click="templateDialogFormVisible=true"
          v-show="data.editFlag"
          perms="market:fullnum:addtemp"
          label="保存模板"
        ></kt-button>
      </div>
      <div class="tab-container tab-container-noPadding">
        <el-tabs v-model="active" type="border-card">
          <el-tab-pane label="促销规则" name="1">
            <div class="basicInfo">基本信息：</div>

            <div class="form-group">
              <div class="color999">促销名称：</div>
              <div class="color333">{{data.promName}}</div>
            </div>
            <div class="form-group">
              <div class="color999">活动时间：</div>
              <div class="color333">{{data.startTime}} 至 {{data.endTime}}</div>
            </div>

            <div class="form-group">
              <div class="color999">活动标签：</div>
              <div class="color333">{{data.labelName}}</div>
            </div>
            <div class="form-group">
              <div class="color999">店铺区域：</div>
              <div class="color333">全国</div>
            </div>
            <div class="basicInfo">活动规则：</div>

            <div class="form-group">
              <div class="color999">活动类型：</div>
              <div class="color333" v-if="data.frontPromType == '2001'">满量减</div>
              <div class="color333" v-if="data.frontPromType == '2002'">满量折</div>
              <div class="color333" v-if="data.frontPromType == '2003'">满量减运费</div>
            </div>

            <div class="form-group">
              <div class="color999">是否叠加应用：</div>
              <div class="color333">
                <span v-if="data.overlayAppNum == '0'">否（超量：按最高层级享受优惠）</span>
                <span v-else-if="data.overlayAppNum == '1'">是（倍量：每满一级优惠一次）</span>
              </div>
            </div>

            <div class="form-group">
              <div class="color999">优惠设置：</div>
              <div class="color333">
                <div v-for="(item,index) in data.fullNumCouponInfoList" :key="index">
                  <div v-if="data.frontPromType == '2002'">
                    满
                    <span>{{item.goodsNum}}</span>件，打
                    <span>{{item.goodsPrice}}</span>折
                  </div>
                  <div v-else-if="data.frontPromType == '2001'">
                    满
                    <span>{{item.goodsNum}}</span>件，减
                    <span>{{item.goodsPrice}}</span>元
                  </div>
                </div>
              </div>
            </div>

            <div class="form-group">
              <div class="color999">活动规则说明：</div>
              <div class="color333">{{data.chineseDesc}}</div>
            </div>

            <div class="basicInfo">交易规则：</div>

            <div class="form-group">
              <div class="color999">是否包邮：</div>
              <div class="color333">
                <span v-if="data.parcelsFlag == 1">是</span>
                <span v-if="data.parcelsFlag == 0">否</span>
              </div>
            </div>
            <div class="form-group">
              <div class="color999">是否分摊：</div>
              <div class="color333">
                <span v-if="data.costAllocationFlag == 1">是</span>
                <span v-if="data.costAllocationFlag == 2">否</span>
              </div>
              <div class="color333" v-if="data.parentAllocationScale">
                <span>母平台比例：</span>
                <span>{{data.parentAllocationScale}}%&nbsp;</span>
              </div>
              <div class="color333" v-if="data.childAllocationScale">
                <span>子平台比例：</span>
                <span>{{data.childAllocationScale}}%&nbsp;</span>
              </div>
              <div class="color333" v-if="data.merchantAllocationScale">
                <span>商家比例：</span>
                <span>{{data.merchantAllocationScale}}%&nbsp;</span>
              </div>
              <div class="color333" v-if="data.storeAllocationScale">
                <span>店铺比例：</span>
                <span>{{data.storeAllocationScale}}%</span>
              </div>
            </div>

            <div class="basicInfo">参与条件：</div>

            <div class="form-group">
              <div class="color999">新老用户：</div>
              <div class="color333">
                <span v-if="data.proUserType != 2 && data.proUserType != null">新用户</span>
                <span v-if="data.proUserType != 1 && data.proUserType != null">老用户</span>
              </div>
            </div>

            <div class="form-group" v-if="deptType == 0">
              <div class="color999">活动渠道：</div>
              <div
                class="color333"
                v-for="(item, index) in data.channelCodes"
                :key="index"
              >{{getChannelName(item)}}&nbsp;</div>
            </div>

            <div class="form-group">
              <div class="color999">用户区域：</div>
              <div class="color333">全国</div>
            </div>

            <div class="form-group">
              <div class="color999">备注：</div>
              <div class="color333" v-html="data.remark"></div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="参与商家" name="2" class="text-center">
            <merchantTemplate @findMerchantPage="findMerchantPage" ref="merchantTemplate"></merchantTemplate>
          </el-tab-pane>
          <el-tab-pane label="参与店铺" name="3">
            <storeTemplate @findStorePage="findStorePage" ref="storeTemplate"></storeTemplate>
          </el-tab-pane>
          <el-tab-pane label="参与商品" name="4" class="text-center">
            <productTemplate
              @findProductPage="findProductPage"
              :promType="'2'"
              ref="productTemplate"
            ></productTemplate>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>

    <div>
      <el-dialog class="el-dialog-style" title="提交审核" :visible.sync="submitReviewVisible">
        <p class="t_c">确认提交审核?</p>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" plain @click="submitReviewVisible = false" :size="size">取 消</el-button>
          <el-button type="primary" @click="submitReview" :size="size">确 定</el-button>
        </span>
      </el-dialog>

      <el-dialog class="el-dialog-style" title="审核" :visible.sync="reviewVisible">
        <el-input v-model="auditRemark" type="textarea" :rows="4" clearable></el-input>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" plain @click="fail" :size="size">不通过</el-button>
          <el-button type="primary" @click="success" :size="size">通过</el-button>
        </span>
      </el-dialog>

      <!-- 模板弹窗 -->
      <el-dialog class="el-dialog-style" title="保存模板" :visible.sync="templateDialogFormVisible">
        <el-form :model="templateForm">
          <el-form-item label="模板名称：" label-width="130px">
            <el-input v-model="templateForm.templateName" autocomplete="off" size="mini" clearable></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" plain @click="templateDialogFormVisible=false" size="mini">取消</el-button>
          <el-button type="primary" @click="saveTemplate()" size="mini">保存模板</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import merchantTemplate from "@/views/Pages/PromotionManagement/components/PromotionMerchantTemplate";
  import storeTemplate from "@/views/Pages/PromotionManagement/components/PromotionStoreTemplate";
  import productTemplate from "@/views/Pages/PromotionManagement/components/PromotionProductTemplate";
  import KtButton from "@/views/Core/KtButton";

  export default {
    components: {
      merchantTemplate,
      storeTemplate,
      productTemplate,
      KtButton
    },
    data() {
      return {
        templateDialogFormVisible: false, //模板弹窗
        templateForm: {}, //模板model
        promotionId: this.$route.query.promotionId,
        size: "small",
        active: "1",
        data: {},
        submitReviewVisible: false, //提交审核弹窗
        reviewVisible: false, //审核弹窗
        auditRemark: null, //审核意见
        skillTimeId: "",
        responseInfoList: [],
        productList: [],
        channelList: [{ childName: "卡奥斯运营平台", id: "179" }],
        deptType: localStorage.getItem("deptType") //当前登录用户所属组织类型
      };
    },
    methods: {
      /**
       * 状态格式化
       */
      statusFormat(row) {
        if (
          row.status == 1 &&
          new Date().getTime() <= new Date(row.startTime).getTime()
        ) {
          //待提交
          return 11;
        } else if (
          row.status == 2 &&
          new Date().getTime() <= new Date(row.startTime).getTime()
        ) {
          //待审核
          return 12;
        } else if (
          row.status == 11 &&
          new Date().getTime() <= new Date(row.startTime).getTime()
        ) {
          //未开始
          return 13;
        } else if (
          row.status == 4 &&
          new Date().getTime() <= new Date(row.startTime).getTime()
        ) {
          //审核未通过
          return 14;
        } else if (
          row.status == 11 &&
          new Date().getTime() >= new Date(row.startTime).getTime() &&
          new Date().getTime() <= new Date(row.endTime).getTime()
        ) {
          //进行中
          return 15;
        } else if (
          (row.status == 1 || row.status == 2 || row.status == 4) &&
          new Date().getTime() > new Date(row.startTime).getTime()
        ) {
          //已过期
          return 16;
        } else if (
          row.status == 11 &&
          new Date().getTime() > new Date(row.endTime).getTime()
        ) {
          //已结束
          return 17;
        }
      },
      /**
       * 保存模板
       */
      saveTemplate() {
        var that = this;
        this.templateForm.promotionId = this.promotionId;
        if (
          this.templateForm.templateName == null ||
          this.templateForm.templateName == ""
        ) {
          that.$message({ message: "模板名称不能为空", type: "error" });
          return false;
        }
        const loading = this.$loading({
          lock: true,
          text: "小的正在加载中,请稍后...",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)"
        });
        this.utils.request.fullNumSaveTemplate(this.templateForm, res => {
          loading.close();
          if (res.code == "0000") {
            this.$message({ message: "保存成功", type: "success" });
            this.templateDialogFormVisible = false;
          } else {
            this.$message({ message: res.msg, type: "error" });
          }
        });
      },
      /**
       * 审核弹
       */
      reviewShow() {
        this.reviewVisible = true;
      },
      /**
       * 通过审核
       */
      success() {
        console.log("通过审核");
        this.utils.request.fullNumCheckFullnum(
          { promotionId: this.promotionId, updateStatus: 11 },
          res => {
            this.$message({ message: "审核成功", type: "success" });
            // this.$set(this.data, "status", 3);
            this.reviewVisible = false;
            this.findinfo();
          }
        );
      },
      /**
       * 不通过
       */
      fail() {
        if (this.auditRemark == null || this.auditRemark == "") {
          this.$message({ message: "请输入审核意见", type: "error" });
          return false;
        }
        console.log("不通过审核");
        this.utils.request.fullNumCheckFullnum(
          {
            promotionId: this.promotionId,
            updateStatus: 4,
            checkRemark: this.auditRemark
          },
          res => {
            this.$message({ message: "审核成功", type: "success" });
            // this.$set(this.data, "status", 4);
            this.reviewVisible = false;
            this.findinfo();
          }
        );
      },
      /**
       * 提交审核
       */
      submitReview() {
        this.utils.request.fullNumCheckFullnum(
          { promotionId: this.promotionId, updateStatus: 2 },
          res => {
            if (res.code == "0000" && res.data) {
              this.$message({ message: "提交审核成功", type: "success" });
              this.$set(this.data, "status", 2);
              this.submitReviewVisible = false;
              this.findinfo();
            } else {
              this.$message({
                message: res.msg || "提交审核失败",
                type: "error"
              });
              this.submitReviewVisible = false;
            }
          }
        );
      },
      /**
       * 提交审核弹窗
       */
      submitReviewShow() {
        this.submitReviewVisible = true;
      },
      /**
       * 查询绑定的商家数据
       * 分页 参数 data.start data.limit
       * */
      findMerchantPage(data) {
        //TDOD
        // this.utils.request.
        console.log(data);
        //回调子组件方法 渲染表格
        //返回的数据 res.rows res.total
        let that = this;
        data.promotionId = this.promotionId;
        this.utils.request.skillQueryMerchant(data, res => {
          if (res.code == "0000") {
            if (
              res.data &&
              res.data.merchantInfoList &&
              res.data.merchantInfoList.length > 0
            ) {
              that.$refs.merchantTemplate.renderMerchantTable({
                rows: res.data.merchantInfoList,
                total: res.data.merchantInfoList.length
              });
            } else {
              that.$refs.merchantTemplate.renderMerchantTable({
                rows: [],
                total: 0
              });
            }
          } else {
            this.$message({
              message: res.msg || "获取活动商家信息失败",
              type: "error"
            });
          }
        });
      },
      /**
       * 查询绑定的店铺数据
       * 分页 参数 data.start data.limit
       * */
      findStorePage(data) {
        //TDOD
        // this.utils.request.

        //回调子组件方法 渲染表格
        //返回的数据 res.rows res.total
        let that = this;
        data.promotionId = this.promotionId;
        this.utils.request.skillQueryStore(data, res => {
          if (res.code == "0000") {
            if (
              res.data &&
              res.data.storeInfoList &&
              res.data.storeInfoList.length > 0
            ) {
              that.$refs.storeTemplate.renderStoreTable({
                rows: res.data.storeInfoList,
                total: Number(res.data.total)
              });
            } else {
              that.$refs.storeTemplate.renderStoreTable({ rows: [], total: 0 });
            }
          } else {
            this.$message({
              message: res.msg || "获取活动店铺信息失败",
              type: "error"
            });
          }
        });
      },
      /**
       * 查询绑定的商品数据
       * 分页 参数 data.start data.limit
       * */
      findProductPage(data) {
        //TDOD
        // this.utils.request.

        //回调子组件方法 渲染表格
        //返回的数据 res.rows res.total
        this.utils.request.fullNumQueryGoods(
          { promotionId: this.promotionId },
          res => {
            this.$refs.productTemplate.renderProductTable({
              rows: res.data.fullNumGoodsInfos,
              total: Number(res.data.total)
            });
          }
        );
        //
      },
      findinfo() {
        this.utils.request.fullNumQueryConfig(
          { promotionId: this.promotionId },
          res => {
            console.log(res);
            this.data = res.data;
          }
        );
      },
      getChannelName(id) {
        let item = this.channelList.find(function(item, index) {
          return item.id == id;
        });
        return typeof item == "undefined" ? "" : item.childName;
      }
    },
    created() {
      if (this.deptType == 0) {
        this.utils.request.queryChildList({}, res => {
          if (res.code == "0000" && res.data && res.data.length > 0) {
            res.data.forEach(item => {
              this.channelList.push(item);
            });
          }
        });
      }
    },
    mounted() {
      this.findinfo();
    }
  };
</script>
<style scoped lang="scss">
  @import '../../../assets/css/public.scss';
</style>
